<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('设置平台进度')" />
</head>
<style>
    /* 添加一些间隔，使每行之间有空白 */
    .table-row {
        margin-bottom: 10px;
        margin-left: 50px;
    }

    /* 设置每个元素之间的间隔 */
    select {
        margin-right: 10px;
        padding: 5px; /* 增加内边距，使下拉框更立体 */
        font-size: 16px; /* 调整字体大小 */
    }

    /* 设置select元素对齐 */
    .select-container {
        display: inline-block;
        width: 150px; /* 根据需要调整宽度 */
    }

    /* 设置平台名称和平台进度的背景颜色和字体大小 */
    .platformName {
        background-color: #92B8B1; /* 灰色背景 */
        padding: 5px; /* 增加内边距 */
        font-size: 18px; /* 调整字体大小 */
    }
</style>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div th:if="${progressInfos != null}" class="progress-container">
        <div th:each="progress, progressStat: ${progressInfos}" class="progress-item">
            <input th:id="'customerId_'+${progressStat.index}" name="customerId" type="hidden" th:value="${progress.customerId}">
            <input th:id="'platformId_'+${progressStat.index}" name="platformId" type="hidden" th:value="${progress.platformId}">
            <div class="form-group">
                <div class="platform-info">
                    <table class="table-row">
                        <tr>
                            <th width="15%" style="font-size: larger;">
                                平台名称：
                            </th>
                            <td width="20%">
                                <span  class="platformName" th:text="${progress.platformName}"></span>
                            </td>
                            <th width="15%" style="font-size: larger">
                                平台进度：
                            </th>
                            <td width="35%">
                                <select th:id="'currentProgress_'+${progressStat.index}" name="currentProgress" th:value="${progress.currentProgress}"
                                        onchange="handleProgressChange(this)">
                                    <option value="0" th:selected="${progress.currentProgress == 0}">未处理</option>
                                    <option value="1" th:selected="${progress.currentProgress == 1}">资料核对（待处理）</option>
                                    <option value="2" th:selected="${progress.currentProgress == 2}">提交资料（已介入）</option>
                                    <option value="3" th:selected="${progress.currentProgress == 3}">等待回电（处理中）</option>
                                    <option value="4" th:selected="${progress.currentProgress == 4}">回电确认（处理完毕）</option>
                                    <option value="5" th:selected="${progress.currentProgress == 5}">已生效（结案）</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer" />

<script type="text/javascript">
    var prefix = ctx + "system/customer";
    function handleProgressChange(selectElement) {
        // 创建一个映射对象来存储值和对应的中文文本
        var progressText = {
            "0": "未处理",
            "1": "资料核对（待处理）",
            "2": "提交资料（已介入）",
            "3": "等待回电（处理中）",
            "4": "回电确认（处理完毕）",
            "5": "已生效（结案）"
        };
        var newProgress = selectElement.value;
        var currentProgress = selectElement.getAttribute('value');

        var currentRow = $(selectElement).closest('.progress-item');
        var customerId = currentRow.find('input[name="customerId"]').val();
        var platformId = currentRow.find('input[name="platformId"]').val();

        if (newProgress !== currentProgress) {
            // 在确认对话框中使用映射对象获取中文文本
            var confirmation = confirm("是否要改变为 " + progressText[newProgress] + " 进度？");

            if (confirmation) {
                // 用户确认，执行Ajax请求
                $.ajax({
                    url: prefix + "/addProgress",
                    method: 'POST',
                    data: JSON.stringify({
                        "customerId": customerId,
                        "platformId": platformId,
                        "currentProgress": newProgress
                    }),
                    dataType: "json",
                    contentType: "application/json",  // 设置内容类型
                    success: function (data) {
                        if(data!=null && data.code ==0){
                            $.modal.alert("设置成功");
                        }
                    },
                    error: function () {
                        $.modal.alert("设置失败");
                    }
                });
            } else {
                // 用户取消操作，将下拉框重置为之前的值
                selectElement.value = currentProgress;
            }
        }
    }
</script>
</body>
</html>
